<script setup lang="ts">
import dayjs from 'dayjs'
import { myGoodsRateGetList, myGoodsRateReplyComments } from '@/api/goodsRate'
import type { MyGoodsRateGetListItem } from '@/api/goodsRate'

/** 获取列表数据 */
interface ListQuery {
  page: number
  size: number
  total: number
  goodsId: number | null
}
const listQuery = ref<ListQuery>({
  page: 1,
  size: 10,
  total: 0,
  goodsId: null,
})
const tableData = ref<MyGoodsRateGetListItem[]>([])
async function getList() {
  const { code, data } = await myGoodsRateGetList(listQuery.value)
  if (code === 0) {
    tableData.value = data.list
    listQuery.value.total = data.total
  }
}
// 回复评论
const popoverVisible = ref<boolean>(false)
const popoverDescription = ref<string>('')
async function popoverSubmit(item: MyGoodsRateGetListItem) {
  if (!popoverDescription.value) {
    window.$message?.warning('请输入回复内容再提交！')
    return
  }
  const { code, msg } = await myGoodsRateReplyComments({
    parentId: item.id,
    type: 'admin',
    userId: item.userId,
    adminId: item.adminId,
    goodsId: item.goodsId,
    description: popoverDescription.value,
  })
  if (code === 0) {
    window.$message?.success(msg)
    popoverVisible.value = false
    popoverDescription.value = ''
    getList()
  }
}
onMounted(() => {
  getList()
})
</script>

<template>
  <n-grid x-gap="10" :cols="10" bg-white p-10 text-14 b-rd-5 dark:bg-dark>
    <n-gi f-c-c font-bold>
      评价时间
    </n-gi>
    <n-gi f-c-c font-bold>
      订单号
    </n-gi>
    <n-gi f-c-c font-bold>
      商品封面
    </n-gi>
    <n-gi f-c-c font-bold>
      商品名称
    </n-gi>
    <n-gi f-c-c font-bold>
      买家头像
    </n-gi>
    <n-gi f-c-c font-bold>
      买家昵称
    </n-gi>
    <n-gi f-c-c font-bold>
      评 分
    </n-gi>
    <n-gi span="2" f-c-c font-bold>
      内 容
    </n-gi>
    <n-gi f-c-c font-bold>
      操作
    </n-gi>
  </n-grid>
  <template v-if="tableData.length > 0">
    <n-grid v-for="item in tableData" :key="item.id" x-gap="10" :cols="10" bg-white p-10 text-14 b-rd-5 mt-10 dark:bg-dark>
      <n-gi f-c-c>
        {{ dayjs(item.createTime || new Date()).format('YYYY-MM-DD HH:mm') }}
      </n-gi>
      <n-gi f-c-c>
        <n-ellipsis>
          {{ item.orderId }}
        </n-ellipsis>
      </n-gi>
      <n-gi f-c-c>
        <Cimage
          width="80"
          height="80"
          :src="item.goods.iconId[0].url"
        />
      </n-gi>
      <n-gi f-c-c>
        <n-ellipsis>
          {{ item.goods.name }}
        </n-ellipsis>
      </n-gi>
      <n-gi f-c-c>
        <Cimage
          width="80"
          height="80"
          :src="item.user.avatar"
        />
      </n-gi>
      <n-gi f-c-c>
        {{ item.user.userName || '未命名买家' }}
      </n-gi>
      <n-gi f-c-c>
        <span>{{ item.count }}</span>
        <icon-ic:round-star-rate style="color: #FFCC33" text-24 />
      </n-gi>
      <n-gi span="2" f-c-c>
        <n-ellipsis :line-clamp="3">
          {{ item.description }}
        </n-ellipsis>
      </n-gi>
      <n-gi f-c-c>
        <template v-if="item.reply">
          <n-popover trigger="click" width="200">
            <template #default>
              <div>{{ dayjs(item.reply.createTime).format('YYYY-MM-DD HH:mm') }} :</div>
              <div>{{ item.reply.description }}</div>
            </template>
            <template #trigger>
              <n-button>
                查看回复
              </n-button>
            </template>
          </n-popover>
        </template>
        <template v-else>
          <n-popover trigger="manual" width="300" :show="popoverVisible">
            <template #default>
              <div>回复评价：</div>
              <n-input
                v-model:value="popoverDescription"
                type="textarea"
                :autosize="{ minRows: 3 }"
                placeholder="请输入回复内容"
                mt-5
              />
              <n-space align="center" justify="center" mt-10>
                <n-button b-rd-5 size="small" @click="popoverVisible = false">
                  <n-icon cursor-pointer size="16">
                    <icon-mdi:cancel />
                  </n-icon>
                  <span ml-2>取 消</span>
                </n-button>
                <n-button b-rd-5 type="primary" size="small" @click="popoverSubmit(item)">
                  <n-icon cursor-pointer size="16">
                    <icon-mdi:checkbox-marked-circle-outline />
                  </n-icon>
                  <span ml-2>确 定</span>
                </n-button>
              </n-space>
            </template>
            <template #trigger>
              <n-button type="info" @click="popoverVisible = true">
                回复评价
              </n-button>
            </template>
          </n-popover>
        </template>
      </n-gi>
    </n-grid>
  </template>
  <template v-else>
    <div bg-white p-10 text-14 font-bold b-rd-5 mt-10 dark:bg-dark f-c-c pt-20 pb-20>
      暂无数据
    </div>
  </template>
</template>

